<template>
  <div class="chat">
    <el-container>
    <el-aside width="170px" class="left">
      <div class="i"><img class="im" :src="img"><a class="in">{{name}}</a></div>
      <div class="home li"><i class="im el-icon-menu"></i><a class="in">聊天室</a></div>
      <ul>
        <li class="li"><img class="im" :src="img"><a class="in">{{name}}</a></li>
        <li v-for="user in userList" class="li"><img class="im" :src="user.img"><a class="in">{{user.name}}</a></li>
      </ul>
    </el-aside>
    <el-main class="right">
      <div class="ch" style="width:600px">
        <el-table
    :data="messageTable"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      label="头像"
      width="70">
      <template slot-scope="scope">
        <img class="im" :src="scope.row.img">
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="100">
    </el-table-column>
    <el-table-column
      prop="content"
      label="内容"
      width="180">
    </el-table-column>
  </el-table>
      </div>
      <div class="chin">
        <i class="el-icon-picture"></i><el-input class="inpu" v-model="input" placeholder="请输入内容"></el-input>
        <el-button size="small" @click="send('index', 'sendMsg', input, 1)">发送</el-button>
      </div>
    </el-main>
    </el-container>
  </div>
</template>

<style>
.chin {
  padding: 3px 30px
}
.chin .inpu{
  width: 75%;
  margin: 0 20px;
}
.chin button{
  position: absolute
}
.ch {
  height: 300px;
  position: relative;
  left: 15px;
  top: -10px;
  background-color: #fff;
}
ul{
  padding: 0px;
  margin: 0px;
}
.chat{
  padding: 10px 20px;
  height: 350px;
  background-color: #eee;
}
.left{
  text-overflow:ellipsis;overflow:hidden;
}
.home {
  margin: 10px 0;
}
.home i{
  font-size: 16px;
  position: relative;
  top: 10px;
  left: 4px;
}
.li:hover i { 
  background-color: inherit;
}
.i {
  height: 35px;
  display: block;
  padding-bottom: 10px;
  padding-left: 20px;
  border-bottom: 1px solid #ccc;
  white-space:nowrap;
}
.li {
  height: 35px;
  display: block;
  padding: 2px 10px;
  cursor: pointer;
}
.li :hover{
  background-color: beige;
}
.li .im{
  padding: 4px 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.li .in{
  color: #555
}
.im {
  width: 35px;
  height: 35px;
  float: left;
  border-radius: 2px
}
.in {
  white-space:nowrap;
  display: block;
  padding: 10px 50px;
  font-size: 15px;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.im{
  padding: 4px 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>

<script>
export default {
  data() {
    return {
      id: 0,
      name: '',
      img: '',
      input: '',
      messageTable: [],
      userList: []
    }
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
        if (row.name == this.name) {
          return 'success-row';
        } else{
          return 'warning-row';
        }
        return '';
      },
    // 向某用户发送消息
    send(c, a, data, type) {
      ws.send(JSON.stringify({
        controller: c,
        action: a,
        data: data
      }))
      if (type === 1) {
        this.messageTable.push({
          img: this.img,
          name: this.name,
          content: data
        })
      }
    },
    login(data) {
      // 处理所有用户列表
      // {u: uuid, a: [uuid_name_img, uuid_name_img ...]}
      console.log(data)
      this.userList = data.userList
    },
    online: function(data){
        // 处理用户上线
        // {u: uuid, a: [name, img]}
        console.log(data)
        this.userList.push(data.user)
    },
    offline: function(data){
        // 处理用户下线
        // {u: uuid, a: []}
        console.log(data)
        var that = this
        this.userList.forEach(function (value, index) {
          if (value.uid == data.uid) {
            that.userList.splice(index, 1)
            that.$message({
              message: data.content,
              type: 'success'
            })
          }
        })
    },
    message: function(data){
        // 处理某用户发送消息
        // {u: uuid, a: [massage]}
        console.log(data)
        this.messageTable.push({
          uid: data.fromUser.uid,
          img: data.fromUser.img,
          name: data.fromUser.name,
          content: data.content
        })
    },
    broadcast: function(data){
        // 处理某用户广播消息
        // {u: uuid, a: [massage]}
        console.log(data)
    }
  },
  created() {
    this.id = this.$route.params['id']
    this.name = this.$route.params['name']
    this.img = this.$route.params['img']
    var wsServer = 'ws://im.yuswoole.cn:9501'
    var that = this
    window.ws = new WebSocket(wsServer)
    ws.onopen = function (evt) {
      that.send('index', 'login', {
        id: that.id,
        name: that.name,
        img: that.img
      }, 0)
      that.$message({
        message: '连接成功',
        type: 'success'
      });
    };

    ws.onclose = function (evt) {
            that.$message.error('连接已断开')
        };
    ws.onerror = function (evt, e) {
            that.$message.error(evt.data)
        };
    ws.onmessage = function(evt) {
        var resulet = JSON.parse(evt.data)
        switch(resulet.type) {
          case 'login':
            that.login(resulet.data)
            break
          case 'notice':
            that.$message({
              message: resulet.data.content,
              type: 'success'
            })
            console.log(resulet.data)
            break
          case 'message':
            that.message(resulet.data)
            break
          case 'online':
            that.online(resulet.data)
            break
          case 'offline':
            that.offline(resulet.data)
            break
          case 'error':
            that.$message.error(resulet.data.content)
        }
    }
  }
}
</script>